<template>
  <div
    class="ball inline-block"
    :class="{
      'w-[28px] h-[28px]': type == 'large',
      'w-[22px] h-[22px]': type == 'default',
      'w-[20px] h-[20px]': type == 'small'
    }"
  >
    <span :class="`ball-${num}`"></span>
  </div>
</template>
<script setup>
defineProps({
  num: {
    type: [Number, String],
    default: 0
  },
  type: {
    type: String,
    default: "default"
  }
});
</script>
<style lang="scss" scoped>
.ball {
  span {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
  @for $i from 0 through 9 {
    .ball-#{$i} {
      background-image: url("@/assets/images/lottery-ball/ssc/#{$i}.png");
      background-size: 100%;
    }
  }
}
</style>
